<template>
	<view class="pages bg-blue">
		
		<cu-custom bgColor="" :isBack="true" :isTitle="false">
			<block slot="backText"  class="titilestyle">{{title}}</block>

		</cu-custom>


		<view class="download-banner animation-fade">
			<image :src="download.banner" class="bannerimg" mode="aspectFit"></image>

		</view>

		<view class="downdata-box ">

			IOS版下载：

		</view>
		<view class="downdata-box ">
			<button class="cu-btn round lg animation-slide-right" v-for="(item,index) in download.ios" @click="createDown(item)" :class="(download.ios.length==index+1)?'fr':''" :style="[{animationDelay:index*0.1+'s'}]">{{item.name}}</button>
			
		</view>
		<view class="downdata-box ">

			Android版下载:

		</view>
		<view class="downdata-box ">
				<button class="cu-btn round lg animation-slide-right" v-for="(item,index) in download.Android" @click="createDown(item)" :class="(download.Android.length==index+1)?'fr':''" :style="[{animationDelay:index*0.1+'s'}]">{{item.name}}</button>
		</view>

	</view>

</template>

<script>
	export default {
		name: "User",
		data() {
			return {
				title: "下载",
				StatusBar: this.StatusBar,
				date: '2018-12-25',
				download: {
					banner: "http://192.168.56.1/res/img/waterbg.png",
					ios: [{
						name: "宠儿飞商户端",
						path:""
					}, 
					{
						name: "宠儿飞配送端",
						path:""
					}
					
					
					],
					Android:[
						{
							name: "宠儿飞商户端",
							path:""
						}, 
						{
							name: "宠儿飞配送端",
							path:""
						}
					]

				},
				userInfo: {
					nickname: "或者是修行",
					password: '',
					gender: 1,
				}


			}


		},
		onLoad() {


		},
		methods: {

			createDown(item) {
				


			}


		}




	}
</script>

<style scoped>
	/* @import '../../static/font/iconfont.css';
 */
	.download-banner {
		width: 100%;
		margin-top: 50upx;
		height: 539upx;

	}

	.bannerimg {
		max-width: 100%;
		max-height: 100%;
	}

	.downdata-box {
		width: 90%;
		margin-left: 5%;
		margin-top: 20upx;
		height: 90upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 28upx;
		font-weight: 800;
		color: #FFFFFF;
		position: relative;
	}

	.cu-btn {
		width: 45%;
		height: 90%;
		font-size: 24upx;
		font-weight: 800;
		color: #333333;
		position: relative;
	}

	.fr {
		position: absolute;
		float: right;
		right: 0;
	}
</style>
